<template>
  <div style="height: 100%; background-color: #232733; border-radius: 10px;" ref="chart"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { hot } from '@/utils/api';

let chart = ref(null);
let myChart: echarts.ECharts | null = null;

const option: any = {
  legend: {
    orient: 'horizontal',
    top: 'top',
    left: 'center',
    itemWidth: 25,
    itemHeight: 14,
    itemGap: 20,
    textStyle: {
      color: 'pink'
    }
  },
  series: [
    {
      label: {
        show: false,
        position: 'inside',
        formatter: '{b}: {c}'
      },
      labelLine: {
        show: false
      },
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

const gethot = () => {
  hot<any>().then(res => {
    console.log(res);
    option.series[0].data = [];
    res[0].children.forEach((element: any) => {
      option.series[0].data.push({
        value: element.value,
        name: element.name
      });
    });
    if (myChart) {
      myChart.setOption(option);
    }
  });
};

onMounted(() => {
  myChart = echarts.init(chart.value);
  myChart.setOption(option);
  gethot();
});
</script>
